<template>
  <div class="ragelabel" @click="itemClick">
    <div class="ragelabel-icon">
      <a-avatar :src="item.img" class="ragelabel-avatar" icon="account-book" />
    </div>
    <div class="ragelabel-label">
      <div class="label">{{ item.label }}</div>
      <div class="count">{{ item.count }}</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  'methods': {
    itemClick() {
      this.$emit('item-click');
    }
  },
  'props': {
    'item': {
      'type': Object,
      default() {
        return {};
      }
    }
  },
  'components': {}
};
</script>

<style lang="scss" scoped>
.ragelabel {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .ragelabel-avatar {
    width: 64px;
    height: 64px;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.205);
  }
  .ragelabel-icon {
    flex: 0.5;
    margin: 0 20px;
  }
  .ragelabel-label {
    flex: 1;
    .label {
      text-align: center;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1f2e4d;
    }
    .count {
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1f2e4d;
      text-align: center;
    }
  }
}
</style>
